<template>
  <slot name="header"></slot>
  <form-item title="商户类别" :pass="!props.multipleShow" v-if="!indexStore.is_general_agent">
    <el-select v-model="data.query.operated_id" placeholder="请选择" filterable @change="getCommercialList">
      <el-option label="全部" :value="-1" v-show="props.multipleShow"/>
      <el-option class="flexBetween" v-for="item in indexStore.operatorArray" :key="item.value"
        :label="'【' + item.value + '】' + item.label" :value="item.value" v-show="item.status">
        【{{ item.value }}】{{ item.label }}
        <div>
          <el-tag size="small" v-if="item.type==1" type="danger" class="marginR2" style="font-size:10px;">测试</el-tag>
          <el-tag size="small" :type="item.value==1?'success':item.currency==1?'danger':'warning'" style="font-size:10px;">
            {{ item.value==1?'直营':item.currency==1?'多货币':'正常总代' }}
          </el-tag>
        </div>
      </el-option>
    </el-select>
  </form-item>
  <form-item title="商户" :pass="true" v-show="props.multipleShow">
    <el-select class="imWidth100" v-model="data.query.agent_ids" placeholder="请选择" filterable multiple @change="chooseAgent">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.commercialArray" :key="item.id" :label="'【' + item.id + '】' + item.agent_name"
        :value="item.id" v-show="item.operator_status && item.status"/>
    </el-select>
  </form-item>
  <form-item title="商户" :pass="true" v-show="!props.multipleShow">
    <el-select v-model="data.query.agent_id" placeholder="请选择" filterable>
      <el-option label="全部" :value="-1" v-show="props.multipleShow"/>
      <el-option v-for="item in data.commercialArray" :key="item.id" :label="'【' + item.id + '】' + item.agent_name"
        :value="item.id" v-show="item.operator_status && item.status"/>
    </el-select>
  </form-item>
  <form-item title="游戏品牌" :pass="true" value="platform" v-show="props.brandShow">
    <el-select v-model="data.query.platform" placeholder="请选择" filterable @change="chooseCate">
      <el-option label="全部" :value="-1" />
      <el-option class="marginB5 marginT5" v-for="item in data.platformList" :key="item.value" :label="item.label" :value="item.value" v-show="item.status">
        <el-tag class="width100">{{ item.label }}</el-tag>
      </el-option>
    </el-select>
  </form-item>
  <form-item title="游戏" :pass="true" value="game_ids" v-show="props.gameShow">
    <el-select class="imWidth100" v-model="data.query.game_ids" placeholder="请选择游戏" filterable multiple @change="chooseGame">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.gameList" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value" v-show="item.status && (props.gameType==-1?true:item.type == props.gameType?true:false)"/>
    </el-select>
  </form-item>
  <slot name="footer"></slot>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { selectToLabel } from '@/utils/index'
import { getAgentApiList } from '@/api/merchant'
import { GameBrandNum } from '@/config/eunm'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  gameShow: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  multipleShow: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  brandShow: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  gameType: {
    type: Number,
    default: () => {
      return 1
    }
  },
  platform: {
    type: Number,
    default: () => {
      return 1
    }
  },
})

export interface commercialType {
  value: number
  label: string
  type: number
}
export interface QueryType {
  agent_id: number
  operated_id: number
}
const data = reactive({
  query: {
    operated_id: -1,
    platform: -1,
    game_ids: [],
    agent_ids: [],
    agent_id: -1,
  },
  commercialArray: [] as any[],
  game_type: -1,
  platformList:indexStore.platformArray,
  gameList:indexStore.gameArray,
})

onMounted(async () => {
  getCommercialList(-1)
})

const emit = defineEmits(['query'])
watch(
  () => data.query,
  (to) => {
    emit('query', { ...data.query })
  },
  { deep: true, immediate: true }
)

// 选择总代-查询总代下所有商户
const getCommercialList = async (id: number) => {
  data.query.agent_ids = []
  data.query.game_ids = []
  let res = await getAgentApiList({ operated_id: id })
  data.commercialArray = res.data as any
}
// 选择商户
const chooseAgent = async (row: any) => {
  if(props.multipleShow){
    const all = row.find((item: number) => item == -1)
    if (all) {
      data.query.agent_ids = [-1] as any
    } else {
      data.query.agent_ids = row
    }
  }else{
    data.query.agent_ids = row
  }
}
// 选择游戏品牌
const chooseCate = (value:number) => {
  data.query.platform = value
  gameShow()
}
// 选择游戏
const chooseGame = async (row: any) => {
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.query.game_ids = [-1] as any
  } else {
    data.query.game_ids = row
  }
}

const gameShow = () => {
  if(data.query.platform == -1 && data.game_type==-1){ // 品牌为全部 游戏为全部
    data.gameList.forEach((item:any)=>{
      item.status = 1
      if(item.platform_backend_echo == 6){
        item.status = 0
      }
    })
  }else if(data.query.platform !=-1 && data.game_type==-1){ // 选择品牌 不选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform !=-1 && data.game_type!=-1){ // 选择品牌 选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform && item.type == data.game_type){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform ==-1 && data.game_type !=-1){ // 不选择品牌 选择游戏类型(隐藏没有此游戏的品牌)
    let platformData  = [] as number[],newData=[] as any[],dataList = [] as any[];
    data.gameList.forEach((item:any)=>{
      if(item.type == data.game_type){
        item.status = 1
        platformData.push(item.platform_backend_echo)
      }else{
        item.status = 0
      }
    })
    newData = [...new Set(platformData)]
    newData.forEach((item:number)=> {
      // 排除已经合并的品牌
      if(selectToLabel(GameBrandNum,item)){
        dataList.push({label:selectToLabel(GameBrandNum,item),value:item, status: 1})
      }
    })
    data.platformList = dataList
  }
}
// 返回单选的ID
const SetBatchControlAlone = () => {
  let queryDetails = JSON.parse(JSON.stringify(data.query));
  return { operated_id:queryDetails.operated_id, agent_id:queryDetails.agent_id }
}
// agent_id
// 返回多选的ID
const SetBatchControl = () => {
  // 选择全部
  let queryDetails = JSON.parse(JSON.stringify(data.query));
  const all = data.query.agent_ids.find((item: number) => item == -1)
  const allGame = data.query.game_ids.find((item: number) => item == -1)
  if (all) {
    queryDetails.agent_ids = []
    data.commercialArray.forEach((item: any) => {
      queryDetails.agent_ids.push(item.id)
    })
  }
  if (allGame) {
    queryDetails.game_ids = []
    indexStore.gameArray.forEach((item: any) => {
      // 查询品牌-选择全部
      if(data.query.platform!= -1){
        if(data.query.platform == item.platform_backend_echo){
          queryDetails.game_ids.push(item.value)
        }
      }else{
        if((item.type == props.gameType || props.gameType==-1)){
          queryDetails.game_ids.push(item.value)
        }
      }
    })
  }
  // 商户列表是空的
  if(!queryDetails.agent_ids.length && !data.commercialArray.length){
    return ElMessage.error('暂无有效商户')
  }
  if(!queryDetails.agent_ids.length){
    return ElMessage.error('请选择商户')
  }
  // 上级总代已经关闭
  if(data.query.operated_id!=-1 && !selectToLabel(indexStore.operatorArray,data.query.operated_id,'status','value')){
    return ElMessage.error('上级总代已经关闭,请开启之后再次操作！')
  }
  if (!queryDetails.game_ids.length && props.gameShow) {
    return ElMessage.error('请选择游戏')
  }
  return { agent_ids:queryDetails.agent_ids, game_ids:queryDetails.game_ids }
}
// 游戏配置-维护所有游戏
const getAgentId = ()=>{
  return data.query.agent_ids
}

// 重置
const onHideDetails = () => {
  data.query = {
    operated_id: -1,
    platform: -1,
    game_ids: [],
    agent_ids: [],
    agent_id: -1,
  }
  chooseCate(-1)
  getCommercialList(-1)
}
defineExpose({
  onHideDetails,
  SetBatchControl,
  SetBatchControlAlone,
  getAgentId
})
</script>

<style lang="scss" scoped></style>